<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="../link.html"%>
<html>
<head>
<title>欢迎登录</title>
<style type="text/css">
html, body { height: 100%; overflow: hidden; }
body {
    font-family: "Verdana", "Tahoma", "Lucida Grande", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
    background: url(images/login/loginbg_09.jpg) no-repeat center center fixed;
    background-size: cover;
}
.form-control{height:37px;}
.main_box{position:absolute; top:45%; left:50%; margin:-200px 0 0 -180px; padding:15px 20px; width:360px; height:400px; min-width:320px; background:#FAFAFA; background:rgba(255,255,255,0.5); box-shadow: 1px 5px 8px #888888; border-radius:6px;}
.login_msg{height:30px;}
.input-group >.input-group-addon.code{padding:0;}
#captcha_img{cursor:pointer;}
.main_box .logo img{height:35px;}
@media (min-width: 768px) {
    .main_box {margin-left:-240px; padding:15px 55px; width:480px;}
    .main_box .logo img{height:40px;}
}
</style>
<script type="text/javascript">
function choose_bg() {//更改背景
    var bg = Math.floor(Math.random() * 7 + 1);
    $('body').css('background-image', 'url(images/login/loginbg_0'+ bg +'.jpg)');
}

function changeCode(){//更换验证码
    //$("#captcha_img").attr("src", "sys/login/getCaptcha?t="+ (new Date().getTime()));
}

function hideMessage(){
	$('#message').html('');
}

function getCookie(name){
	if (document.cookie.length>0){
		var start=document.cookie.indexOf(name + "=");
		if (start!=-1){
			start=start + name.length+1
			var end=document.cookie.indexOf(";",start)
			if (end==-1) 
				end=document.cookie.length;
			return unescape(document.cookie.substring(start,end));
		}
	}
	return false;
}

function login(){
	var index=$('#btn-submit').attr('class').indexOf("disabled");
	if(index==-1){//disabled的下标为-1说明确定按钮可用
		if ($(":checkbox").prop('checked')) {//如果勾选"记住登录账号"
			//设置cookie,获取当前时间,加一天,为cookie过期时间
	 	   var exdate = new Date();
	 	   exdate.setTime(exdate.getTime() + 1*24*60*60*1000);
	 	   document.cookie=COOKIE_NAME+ "=" +$("#account").val()+";expires="+exdate.toGMTString();
		} else {
			//删除cookie,设置过期时间为过去时间即删除
			var exdate = new Date();
			exdate.setTime(exdate.getTime() - 1);
			document.cookie=COOKIE_NAME+"=XXX;expires="+exdate.toGMTString();
		}
		return true;
	}
	return false;
}
var COOKIE_NAME = 'account';//cookie名称
$(function() {
    choose_bg();//更换背景图片
    changeCode();//更换验证码
    if (getCookie(COOKIE_NAME)){
        $("#account").val(getCookie(COOKIE_NAME));//根据cookie设置账号
        $("#password").focus();//密码输入框获得焦点
        $("#remember").attr('checked', true);//勾选“记住账号”
    } else {
        $("#account").focus();//无cookie,账号框获取焦点
    }
    $("#captcha_img").click(function(){//点击验证码更换图片
        changeCode();
    });
   
});
</script>
</head>

<body>
<div class="container">
    <div class="main_box">
        <form action="login" id="login_form" method="post" data-toggle="validator" role="form">
			<!-- 酒店LOGO -->
            <p class="text-center logo"><img src="images/login/logo.png" height="45"></p>
            <!-- 登录错误信息 -->
            <div id="message" class="login_msg text-center" style="color:red;">${message}</div>
            
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon" id="sizing-addon-user"><span class="glyphicon glyphicon-user"></span></span>
                    <input class="form-control" id="account" name="account" value="" 
                    placeholder="登录账号" aria-describedby="sizing-addon-user" onfocus="hideMessage();" required>
                </div>
            </div>
            
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon" id="sizing-addon-password"><span class="glyphicon glyphicon-lock"></span></span>
                    <input type="password" class="form-control" name="password" 
                    placeholder="登录密码" aria-describedby="sizing-addon-password" onfocus="hideMessage();" required>
                </div>
            </div>
            
<!--             <div class="form-group"> -->
<!--                 <div class="input-group"> -->
<!--                     <span class="input-group-addon" id="sizing-addon-password"><span class="glyphicon glyphicon-exclamation-sign"></span></span> -->
<!--                     <input type="text" class="form-control" id="j_captcha" name="captcha" placeholder="验证码" aria-describedby="sizing-addon-password"> -->
<!--                     <span class="input-group-addon code" id="basic-addon-code"><img id="captcha_img" src="images/captcha.jpg" alt="点击更换" title="点击更换" class="m"></span> -->
<!--                 </div> -->
<!--             </div> -->
            
            <div class="form-group">
            	<label for="remember" class="m">
                	<input id="remember" type="checkbox" class="icheckbox_minimal">&nbsp;记住登录账号!
                </label>
            </div>
            
            <div class="text-center">
                <button type="submit" id="btn-submit" onClick="return login();" class="btn btn-primary btn-lg">&nbsp;登&nbsp;录&nbsp;</button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button type="reset" class="btn btn-default btn-lg">&nbsp;重&nbsp;置&nbsp;</button>
            </div>
            <div class="text-center">
                <hr>
                2018 MIS课程设计-快捷酒店POS-&copy;15信管4班第六组
            </div>
        </form>
    </div>
</div>
</body>
</html>
